<template>
	<div id="s3">
		<el-container class='s1-container'>
			<!-- 头部区域 -->
			<el-header></el-header>
			<!-- 主体区域 -->
			<el-main>
				<Steps ref="activeChange"></Steps>
				<div class="main-content">
					<div id="box4">
						我是S3
					</div>
					<div id="box5">
						我是S3
					</div>
				</div>
			</el-main>
			<!-- 底部区域 -->
			<el-footer></el-footer>
		</el-container>
	</div>
</template>

<script>
	import Steps from '../../components/Steps'
	export default {
		name: 'S3',
		data() {
			return {

			}
		},
		components: {
			Steps
		},
		methods: {

		},
		mounted() {
			this.$refs.activeChange.active = 2
		}
	}
</script>

<style type="text/css">
	#box4,
	#box5 {
		background-color: #BF616A;
		width: 500px;
		height: 500px;
		color: white;
		font-size: 50px;
	}
	.main-content{
		display: flex;
		justify-content: space-around;
	}
	
	/* 设置头部和底部的样式 */
	.el-header,
	.el-footer {
		background-color: #333333;
		color: #333;
		text-align: center;
		line-height: 80px;
	}

	/* 设置主体部分样式 */
	.el-main {
		text-align: center;
		height: 640px;
	}
</style>
